<template>
  <div class="information" v-loading="loading">
    <titleText title="我的信息"></titleText>
    <div class="days">
      <div class="days_1">已学习天数</div>
      <div>{{ userInfo.xuexitianshu }}天</div>
    </div>
    <div class="head">
      <div class="head_le">头像</div>
      <div class="head_ri">
        <!-- <upload class="upload_view" :limit="1" @getfile="filelistData">
        </upload> -->
        <input
          class="upload_input"
          type="file"
          accept="image/png, image/jpeg, image/jpg"
          @change="handleFiles"
        />
        <img class="head_ri_userimg" :src="userInfo.avatar" alt="" />
        <img class="head_ri_icon" src="../../assets/login/12.png" alt="" />

        <!-- <input @click="ossUpload" type="file" accept=".jpg,.jpeg,.png" class="head_ri_upload"> -->
      </div>
    </div>
    <div class="input_item">
      <div class="input_item_le">
        <!-- <span class="input_item_le_1">*</span> -->
        <span>姓名</span>
      </div>
      <div class="input_item_ri">
        <el-input
          :disabled="true"
          v-model="userInfo.real_name"
          placeholder="请输入姓名"
          placeholder-style="color:#bfbfbf;font-size:7px;"
        />
      </div>
    </div>
    <div class="select_1">
      <div class="select_1_le">
        <!-- <span class="select_1_le_1">*</span> -->
        <span>性别</span>
      </div>
      <div class="select_1_ri">
        <div class="select_1_item" @click="selectGender(1)">
          <img
            v-if="userInfo.gender == 1"
            src="../../assets/default/3.png"
            alt=""
          />
          <img v-else src="../../assets/default/4.png" alt="" />
          <span>男</span>
        </div>
        <div class="select_1_item" @click="selectGender(2)">
          <img
            v-if="userInfo.gender == 2"
            src="../../assets/default/3.png"
            alt=""
          />
          <img v-else src="../../assets/default/4.png" alt="" />
          <span>女</span>
        </div>
      </div>
    </div>
    <div class="input_item">
      <div class="input_item_le">
        <span>班级</span>
      </div>
      <div class="input_item_ri">
        <el-input
          :disabled="true"
          v-model="userInfo.banji"
          placeholder="请输入班级"
          placeholder-style="color:#666;font-size:8px;"
        />
      </div>
    </div>
    <div class="input_item">
      <div class="input_item_le">
        <span>学号</span>
      </div>
      <div class="input_item_ri">
        <el-input
          :disabled="true"
          v-model="userInfo.xuehao"
          placeholder="请输入学号"
          placeholder-style="color:#666;font-size:8px;"
        />
      </div>
    </div>
    <div class="input_item">
      <div class="input_item_le">
        <span>校区</span>
      </div>
      <div class="input_item_ri">
        <el-input
          :disabled="true"
          v-model="userInfo.xiaoqu"
          placeholder="请输入校区"
          placeholder-style="color:#666;font-size:8px;"
        />
      </div>
    </div>
    <div class="save_btn">
      <div class="save_btn_1" @click="saveUser">保存</div>
      <div class="save_btn_2" @click="loginOut">退出登录</div>
    </div>
  </div>
</template>


<script name="myInformation" setup>
// import { put, signatureUrl, getFileNameUUID } from '@/utils/tools'
import {
  post661f7a29c8ae2,
  post661f7c14af531,
  post662092c66ee3c,
} from "@/utils/api.js";
import upload from "@/components/upload.vue";
import titleText from "./titleText.vue";
import axios from "axios";
import { ref, reactive, onMounted, inject } from "vue";
import { useUserStore } from "@/stores/user";
const store = useUserStore();
const injectMessage = inject("$message");
import { useRouter } from "vue-router";
let router = useRouter();

let userInfo = reactive({});
let loading = ref(true);


onMounted(() => {
  getData();
});
// 获取会员详细信息
function getData() {
  post661f7a29c8ae2({})
    .then((res) => {
      if (res.code == 1) {
        loading.value = false;
        userInfo = Object.assign(userInfo, res.data);
        store.setUserInfo(res.data);
      }
    })
    .catch((err) => {
      console.log(err);
    });
}
function selectGender(gender) {
  userInfo.gender = gender;
}
// function filelistData(list) {
//   // console.log(list);
//   userInfo.avatar = list[0];
// }

let fileList = ref([]);
function handleFiles(e) {
  // 获取配置信息
  post662092c66ee3c({}).then((res) => {
    if (res.data) {
      for (let i = 0; i < e.target.files.length; i++) {
        // 执行上传
        let file = e.target.files[i];
        let filename = file.name;
        let fileSize = file.size; // b
        let ossData = res.data;
        let formData = new FormData();
        let key = ossData.dir + filename;
        let config = {
          headers: { "Content-Type": "multipart/form-data" },
        };
        // 判断上传的视频是否超过500M
        if (fileSize > 5 * 1024 * 1024) {
          injectMessage.error("图片大小不得超过5M");
          return false;
        }
        // let random = Math.floor(Math.random() * 900) + 100;  // 生成随机数
        formData.append("OSSAccessKeyId", ossData.accessKeyId);
        formData.append("policy", ossData.policy);
        formData.append("signature", ossData.signature);
        formData.append("Filename", filename);
        formData.append("key", ossData.dir + filename);
        formData.append("success_action_status", "200");
        formData.append("file", file);

        axios.post(ossData.host, formData, config).then((res) => {
          if (res.status == 200) {
            userInfo.avatar = ossData.host + "/" + ossData.dir + filename;
          }
        });
      }
    } else {
      injectMessage.error("获取上传配置信息失败");
    }
  });
}
function saveUser() {
  post661f7c14af531({
    avatar: userInfo.avatar,
    gender: userInfo.gender,
  })
    .then((res) => {
      console.log(res);
      if (res.code == 1) {
        injectMessage.success("保存成功");
        getData();
      }
    })
    .catch((err) => {
      console.log(err);
    });
}
function loginOut() {
  store.clearUserInfo();
  injectMessage.success("登录已退出");
  router.replace({
    path: "/"
  })
}
</script>

<style lang="scss" scoped>
.information {
  padding: 18px 16px;
  background: #fff;
  min-height: 437px;
  .days {
    display: flex;
    align-items: center;
    font-size: 8px;
    font-weight: 500;
    margin: 13px 0 18px;
    .days_1 {
      color: #999;
      margin-right: 2px;
    }
  }
}
.head {
  display: flex;
  align-items: center;
  .head_le {
    width: 47px;
    font-size: 8px;
  }
  .head_ri {
    position: relative;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    cursor: pointer;
    .upload_input {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      opacity: 0;
      cursor: pointer;
    }
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      object-fit: cover;
    }
    .head_ri_userimg {
      // position: absolute;
      // left: 0;
      // top: 0;
    }
    .head_ri_icon {
      width: 14px;
      height: 14px;
      position: absolute;
      right: 3px;
      bottom: 1px;
      // z-index: 3;
    }
    .head_ri_upload {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      opacity: 0;
      z-index: 10;
    }
  }
}
.input_item {
  display: flex;
  align-items: center;
  margin-top: 16px;
  .input_item_le {
    width: 47px;
    font-size: 8px;
    .input_item_le_1 {
      color: #f43024;
    }
  }
  .input_item_ri {
    font-size: 8px !important;
    border-radius: 2px;
    border: 1px solid #e5e5e5;
    height: 20px;
    width: 240px;
  }
}
.select_1 {
  display: flex;
  align-items: center;
  margin-top: 16px;
  .select_1_le {
    width: 47px;
    font-size: 8px;
    .select_1_le_1 {
      color: #f43024;
    }
  }
  .select_2_le {
    width: 150px;
    font-size: 8px;
    .select_2_le_1 {
      color: #f43024;
    }
    .select_2_le_2 {
      font-size: 8px;
      color: #999;
    }
  }
  .select_1_ri {
    display: flex;
    align-items: center;
    .select_1_item {
      display: flex;
      align-items: center;
      margin-right: 15px;
      font-size: 8px;
      cursor: pointer;
      img {
        width: 7px;
        height: 7px;
        margin-right: 8px;
      }
    }
  }
}
.save_btn {
  margin: 32px 0 0 47px;
  display: flex;
  align-items: center;
  // justify-content: center;
  .save_btn_1 {
    width: 113px;
    height: 24px;
    background: #1f52ae;
    border: 1px solid #1f52ae;
    font-size: 8px;
    color: #fff;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .save_btn_2 {
    width: 113px;
    height: 24px;
    border: 1px solid #1f52ae;
    background: #fff;
    margin-left: 15px;
    font-size: 8px;
    color: #1f52ae;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
}
</style>